import React from 'react';
import { Card, Steps, Button, Row, Col } from 'antd';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Result from '@/components/Result';
import downloadFile from '@/utils/utils';
import styles from './style.less';

const { Step } = Steps;

class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      successNumber: null, // 成功条数
      amountInvolved: null,
      billNo: null,
      batNo: null,
      errorNumber: null, // 失败条数
      errorInfo: null, // 失败原因
    };
  }

  componentDidMount() {
    const billUploadData = JSON.parse(window.localStorage.getItem('billUploadData'));
    this.setState({
      successNumber: billUploadData.successNumber,
      amountInvolved: billUploadData.amountInvolved,
      billNo: billUploadData.billNo,
      batNo: billUploadData.batNo,
      errorNumber: billUploadData.errorNumber,
      errorInfo: billUploadData.errorInfo,
    });
  }

  // 下载
  downloadError = () => {
    const { batNo } = this.state;
    downloadFile({ batNo }, '/csApi/csBill/downBillEmpErr', 'POST');
  };

  // 完成
  splitBillFinish = () => {
    router.push('/chargemanage/customerbilling/index');
  };

  render() {
    const { successNumber, amountInvolved, errorNumber, billNo, errorInfo } = this.state;
    const information = (
      <div className={styles.information}>
        <Row>
          <Col span={8} className={styles.label}>
            拆出雇员数：
          </Col>
          <Col span={16}>{successNumber}人</Col>
        </Row>
        <Row>
          <Col span={8} className={styles.label}>
            涉及金额：
          </Col>
          <Col span={16}>{amountInvolved}元</Col>
        </Row>
        {+errorNumber === 0 ? (
          <Row>
            <Col span={8} className={styles.label}>
              金额所在账单编号：
            </Col>
            <Col span={16}>{billNo}</Col>
          </Row>
        ) : (
          <div>
            <Row>
              <Col span={8} className={styles.label}>
                错误数据：
              </Col>
              <Col span={8}>{errorNumber}条</Col>
              <Col span={8}>
                <Button onClick={this.downloadError} size="small">
                  下载
                </Button>
              </Col>
            </Row>
            <Row>
              <Col span={8} className={styles.label}>
                错误信息：
              </Col>
              <Col span={8}>{errorInfo}</Col>
            </Row>
          </div>
        )}
      </div>
    );
    return (
      <PageHeaderWrapper>
        <Card>
          <Steps current={2}>
            <Step title="选择拆分类型" />
            <Step title="上传雇员" />
            <Step title="完成" />
          </Steps>
          <Result type="success" title="操作成功" extra={information} className={styles.result} />
          <div style={{ marginTop: '50px', marginBottom: '30px', textAlign: 'center' }}>
            <Button type="primary" onClick={this.splitBillFinish}>
              返回
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
